<template>
    <div class="">
        <div id="pieChart"></div>
        <div id="store"></div>
        <div id="sale"></div>
    </div>    
</template>
<script>
import axios from "axios"
export default {
    data(){
       return{
           order_1:0,
           order_2:0,
           order_3:0,
        //    存商品名字，为下面服务
           store_data:[],
        //    各类总库存
           store_Alldata:[],
        //    商品库存
           store_gooddata:[],
        //    所有的名字
           store_namedata:[],
        //    商品种类的id及名字
           sale_typedata:[],
           //    有订单的商品种类的名字
           sale_typename:[],
           //    有订单的商品种类的总卖出的钱
           sale_typemoney:[],
       }
    },
    beforeMount(){
            this.getSale();
            
    },
     mounted(){
            
            this.getStore();
    },
    methods:{
        // 获取商品
        getSale(){
            axios
                .get("/goodsType/")
                .then((res)=>{
                    // console.log(res.data);
                    // 获取商品类
                    for( var i in res.data){
                        // 工具变量，存放商品类别名字
                        this.store_data.push(res.data[i].name);
                        // 工具变量，存放商品类别名字和id
                        this.sale_typedata.push({
                            name:res.data[i].name,
                            id:res.data[i]._id
                            })
                    }
                    // console.log(this.sale_typedata);
                    // 获取商品
                    axios
                         .get("/goods/getAllGoods")
                         .then((res)=>{
                            //  console.log(res.data);
                             var arr=res.data;
                            //  console.log(this.store_data);
                             var goodsType=this.store_data
                            //  筛选类库存
                             for(var f in goodsType){
                                //  筛选出一个类的所有商品
                                  var arrdata=arr.filter(function(item,index,arr){
                                        return item.classifyId.name==goodsType[f]
                                  })
                                //   console.log(arrdata);
                                    // 筛选出商品库存
                                    // 把一个类的商品加入商品数组
                              var goodsarr=arrdata.map(function(item,index,arr){
                                        return  {name:item.name,value:item.store}
                              })
                               this.store_gooddata.push(...goodsarr);
                                //    累加 获取类总库粗
                                  var storenumber=arrdata.reduce(function(total,item,index,arr){
                                        return total+item.store
                                  },0)
                                //   console.log(storenumber);
                                //   加入总数组,类库存
                                  this.store_Alldata.push({name:goodsType[f],value:storenumber})
                             }
                                // console.log(this.store_Alldata);
                               
                               // 筛选出商品库存
                            //   console.log(goodsarr);
                            //   拿到所有的名字
                              var allname=this.store_Alldata.map(function(item,index,arr){
                                        return  `${item.name}`
                              })
                               allname.push(...goodsarr.map(function(item,index,arr){
                                        return  `${item.name}`
                              }))
                            //   console.log(allname);
                              this.store_namedata=allname;
                              this.store();
                             } 
                           )
                            
                      })
               
            
        },
        // 获取订单
        getStore(){
        
                axios
            .post("/order/query")
            .then((res)=>{
                // console.log(res.data);
                // 未发货
                var arr_1=res.data.result.filter(function(value,index,arr){
                       return value.status==1
                })
                this.order_1=arr_1.length;
                // 已经发货
                var arr_2=res.data.result.filter(function(value,index,arr){
                       return value.status==2
                })
                this.order_2=arr_2.length;
                // 取消
                var arr_3=res.data.result.filter(function(value,index,arr){
                       return value.status==3
                })
                this.order_3=arr_3.length;
                this.chartFn();
                // console.log("arr_2");
                
                // console.log(arr_2);
                // console.log("this.sale_typedata");
                // console.log(this.sale_typedata);
                var typedata=this.sale_typedata;
                // 遍历
                for(var m in typedata){
                    // 筛选出一样id的，一个种类的
                  var toolsarr= arr_2.filter(function(item,index,arr){
                          return item.goods_id.classifyId._id==typedata[m].id
                  })
                  
                //   如果存在
                  if(toolsarr.length>0){
                    //   累加，得到销售额
                       var toolmoney= toolsarr.reduce(function(total,item,index,arr){
                            return total+item.sum
                  },0)
                    // 吧名字和销售额分别获取
                    // console.log(toolmoney);
                       
                       this.sale_typename.push(typedata[m].name)
                       this.sale_typemoney.push(toolmoney)
                        
                  }
                  
                }
                console.log("sale引入");
                
                console.log(this.sale_typename);
                console.log(this.sale_typemoney);
                // 引入统计图
                this.sale();
            })
        },
        // 订单统计图
        chartFn(){
            // 基于准备好的dom，初始化echarts实例
            var pieChart = this.$echarts.init(document.getElementById('pieChart'));
            pieChart.setOption(
                {
                     title: {
                        text: '订单统计',
                        left: 'center'
                    },
                    color:["rgba(82, 199, 46, 0.93)","rgba(182, 199, 46, 0.93)","rgba(82, 199, 146, 0.93)"],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['未发货', '已发货', '已取消', ]
                    },
                    series: [
                        {
                            name: '状态',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: this.order_1, name: '未发货'},
                                {value: this.order_2, name: '已发货'},
                                {value: this.order_3, name: '已取消'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                
                }
            )
        },
        //库存统计图
        store(){
            // 基于准备好的dom，初始化echarts实例
            console.log("stroe获取");
            console.log(this.store_Alldata);
            console.log(this.store_gooddata);
            console.log(this.store_namedata);
            console.log("stroe获取");
            var pieChart = this.$echarts.init(document.getElementById('store'));
            pieChart.setOption(
                {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                title: {
                    text: '库存统计',
                    left: 'center',
                    top: 0,
                    textStyle: {
                        color: 'rgba(0, 0, 0,1)'//标题颜色
                    }
                            },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: this.store_namedata
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],

                        label: {
                            position: 'inner'
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.store_Alldata
                    },
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        label: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        },
                        data: this.store_gooddata
                    }
                ]
                }
            )
        },
        //销售额统计图
        sale(){
            // 基于准备好的dom，初始化echarts实例
            console.log("sale引入");
                
                console.log(this.sale_typename);
                console.log(this.sale_typemoney);
                console.log("sale引入");
            var pieChart = this.$echarts.init(document.getElementById('sale'));
            pieChart.setOption(
                {
                    color: ['rgba(82, 199, 46, 0.63)'],
                    title: {
                            text: '销售额统计',
                            left: 'center',
                            top: 0,
                            textStyle: {
                                color: 'rgba(0, 0, 0,1)'//标题颜色
                    }
                            },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.sale_typename,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额',
                            type: 'bar',
                            barWidth: '60%',
                            data: this.sale_typemoney
                        }
                    ]
                }
            )
        }
    }
}
</script>
<style>
#pieChart{
    width: 100%;
    height: 600px;
    /* background-color: rgba(82, 199, 46, 0.63); */
}
#store{
    width: 100%;
    height: 600px;
}
#sale{
    width: 100%;
    height: 600px;
}
</style>


